<template>
  <div class="main">
    <el-collapse v-model="state.activeNames" accordion>
      <el-collapse-item title="表单（CzrForm、CzrFormColumn）" name="form">
        <h1>表单应用及校验</h1>
        <el-row>
          <CzrFormColumn
            label="labelWidth"
            link="number"
            v-model:param="state.form.labelWidth"
            :clearable="false"
          />
          <CzrFormColumn
            label="formView"
            link="radio"
            v-model:param="state.form.formView"
            :clearable="false"
            :options="[
              { label: '禁用', value: true },
              { label: '可修改', value: false },
            ]"
          />
          <el-button type="primary" @click="onSubmit"
            >触发表单校验信息</el-button
          >
          <el-button type="warning" @click="() => ref_form.reset()"
            >移除表单校验信息</el-button
          >
        </el-row>
        <CzrForm
          ref="ref_form"
          :label-width="state.form.labelWidth + 'px'"
          :form-view="state.form.formView"
          @handleEnter="() => ElMessage.success('表单内触发了回车方法！')"
        >
          <CzrFormColumn label="非必填" v-model:param="state.form.input1" />
          <CzrFormColumn
            required
            label="必填"
            v-model:param="state.form.input2"
          />
          <CzrFormColumn
            label="特殊校验(<10)"
            link="number"
            v-model:param="state.form.input3"
            :rules="[
              {
                handle: (val: any) =>
                  !isValue(val) || (isValue(val) && val < 10),
                message: `输入值需<10`,
              },
            ]"
          />
          <el-col :span="24">
            模拟表格
            <div style="border: 1px solid #000000">
              <el-row>
                <el-col :span="6" style="text-align: center">p1</el-col>
                <el-col :span="6" style="text-align: center">p2</el-col>
              </el-row>
              <template v-for="item in state.form.table">
                <el-row>
                  <CzrFormColumn v-model:param="item.p1" />
                  <CzrFormColumn required v-model:param="item.p2" />
                </el-row>
              </template>
            </div>
          </el-col>
        </CzrForm>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  watch,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { isValue } from '@/utils/czr-util'

const { proxy } = getCurrentInstance()
const state: any = reactive({
  activeNames: 'form',
  form: {
    labelWidth: 100,
    formView: false,
    input1: '',
    input2: '',
    input3: '',
    table: [
      { p1: '', p2: '' },
      { p1: '', p2: '' },
      { p1: '', p2: '' },
    ],
  },
})
const ref_form = ref()

const onSubmit = () => {
  ref_form.value
    .submit()
    .then(() => {})
    .catch((e) => {
      ElMessage({
        message: e[0].message,
        grouping: true,
        type: 'warning',
      })
    })
}
onMounted(() => {})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>
